分析 Angular + RxJS 性能问题，最有效的方法是结合：

• 浏览器工具（如 Chrome DevTools）
• Angular 自带调试工具（如 Angular DevTools）
• RxJS 专项技巧（如追踪流、订阅分析、内存泄漏检查）

🔍 一、常见 RxJS 性能问题类型

🧰 二、核心工具与步骤

✅ 1. Chrome DevTools Performance 面板

📌 定位变更频率过高、调用栈异常、微任务泛滥

步骤：

1. 打开 Chrome DevTools → Performance 标签页

2. 点击“录制”按钮，重现性能问题场景（如页面卡顿）

3. 查看：

   • Major GC：垃圾回收频率
   • Scripting/Rendering：脚本耗时
   • 关键：找出频繁调用 ɵdetectChanges、Zone.runTask 的位置

4. **火焰图（flame chart）**中查看触发 subscribe, next, tick 等函数的次数与位置

✅ 2. Angular DevTools

📌 专用于 Angular 项目的调试工具，分析变更检测与组件订阅关系

安装：Chrome 插件

使用：

• 切换到 Profiler 选项卡

• 点击“Record”

• 重现操作后，查看：

  • 哪些组件频繁触发 change detection（变更检测）
  • 哪些组件订阅了 observables

• 点击组件，查看其 Inputs, Change Detection Strategy, Lifecycle Hooks

👉 结合使用 ChangeDetectionStrategy.OnPush 可以极大降低变更检测开销

✅ 3. RxJS 调试技巧

🔍 a. 使用 tap 或 debug() 自定义日志：

1
2
3
4
5

import { tap } from 'rxjs/operators';

this.myStream$.pipe(
  tap(val => console.log('流值:', val))
).subscribe();

🔥 b. 打印订阅与取消订阅：

1
2
3
4
5
6

import { finalize } from 'rxjs/operators';

this.data$.pipe(
  tap(() => console.log('Subscribed')),
  finalize(() => console.log('Unsubscribed'))
).subscribe();

🧪 c. 封装通用日志工具：

1
2
3
4
5
6
7
8
9

function debug<T>(label: string): MonoTypeOperatorFunction<T> {
  return pipe(
    tap(
      val => console.log(`[${label}] next:`, val),
      err => console.error(`[${label}] error:`, err),
      () => console.log(`[${label}] complete`)
    )
  );
}

💡 三、RxJS 性能优化建议

🛡️ 四、检测内存泄漏（RxJS 特别常见）

✅ 使用 Chrome DevTools → Memory 快照

1. 打开 Memory 面板
2. 创建快照 → 触发交互 → 再拍快照
3. 查看是否有组件或流对象未被释放
4. 使用 “Retainers” 找出引用链是否是未清理的 Subscription

🚀 示例：RxJS 内存泄漏典型场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Component({...})
export class MyComponent implements OnInit {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.service.getData().pipe(
      takeUntil(this.destroy$)
    ).subscribe();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

📘 五、实用工具推荐

✅ 总结流程图

1
2
3
4
5
6
7
8
9

用户操作 → DevTools Record
              ↓
      Angular DevTools 检查变更次数
              ↓
   RxJS tap/debug 检查流频率和订阅
              ↓
       Memory Snapshot 排查泄漏
              ↓
       优化：取消订阅 + 节流 + 合并流